<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="common/common::header">
    <title>权限管理</title>
</head>
<style type="text/css">
    body {
        padding: 10px 30px;
    }
    .hide {
        display: none
    }
</style>
<body>
<!--导航栏-->
<div class="x-nav">
              <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href="">系统管理</a>
                <a><cite>权限管理</cite></a>
              </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>

<!-----查询条件---->
<blockquote shiro:hasPermission="permission_list" class="layui-elem-quote news_search">
    <div class="layui-input-inline">
        <button class="layui-btn layui-btn-primary up-all">全部收起</button>
        <button class="layui-btn layui-btn-primary down-all">全部展开</button>
        <button shiro:hasPermission="permission_addmenu" class="layui-btn" lay-submit lay-filter="addDir">添加目录</button>
    </div>
</blockquote>

<!--添加权限 DOM-->
<div id="permissionDom" style="display: none">
    <form id="addPermission" method="post" class="layui-form" action="">
        <div class="layui-form-item">
            <div class="layui-input-inline">
                <input type="hidden" name="id" id="id" value=""/>
                <input type="hidden" name="permiParentId" id="permiParentId" value=""/>
                <input type="hidden" name="permiType" id="permiType" value=""/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">权限名称<span class="x-red">*</span>:</label>
            <div class="layui-input-inline">
                <input type="text" id="permiTitle" name="permiTitle" lay-verify="required" style="width: 200px;"
                       placeholder="权限名称"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <!-- <div class="layui-form-item">
             <label class="layui-form-label">类型<span class="x-red">*</span>:</label>
             <div class="layui-input-block" >
                 <input type="radio" id="pdir" name="permiType" value="0" title="目录" disabled>
                 <input type="radio" id="pmenu" name="permiType" value="1" title="菜单" checked disabled>
                 <input type="radio" id="pfunc" name="permiType" value="2" title="功能" disabled>
             </div>
         </div>-->
        <div class="layui-form-item">
            <label class="layui-form-label">权限标示<span class="x-red">*</span>:</label>
            <div class="layui-input-inline">
                <input type="text" id="permiName" name="permiName" lay-verify="required" style="width: 200px;"
                       placeholder="如：user:add"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">权限路径<span class="x-red">*</span>:</label>
            <div class="layui-input-inline">
                <input type="text" id="permiUrl" name="permiUrl" lay-verify="required" style="width: 200px;"
                       placeholder="如：/dangxia/"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">权限序列<span class="x-red">*</span>:</label>
            <div class="layui-input-inline">
                <input type="text" id="seq" name="seq" lay-verify="number|required" style="width: 200px;"
                       placeholder="如：140"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">权限描述<span class="x-red"></span>:</label>
            <div class="layui-input-block">
                <textarea id="permiDescribe" name="permiDescribe" style="width: 300px;" placeholder="描述信息"
                          class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="submit">提交</button>
        </div>
    </form>
</div>
<!--树形表格-->
<table shiro:hasPermission="permission_list" class="layui-table layui-form" id="test-tree-table"></table>

<script type="text/javascript" th:inline="none">
    layui.config({
        base: '../lib/extends/',
    })
    layui.use(['treetable', 'form'], function () {
        var o = layui.$, treetable = layui.treetable;
        var form = layui.form, layer = layui.layer;
        /* --------获得所有权限-------- */
        $.post("/dangxia/permission/getPermissionAll", {
            status: ""
        }, function (Data) {
            if (Data.code == 0) {
                var data = Data.data;
                treetable.render({
                    elem: '#test-tree-table',
                    data: data,
                    field: 'title'
                    /*is_checkbox: true,
                    checked:[1,2,3,4],*/
                    /*icon_val: {
                        open: "&#xe619;",
                        close: "&#xe61a;"
                    },*/
                    ,space: 8,
                    cols: [
                        {
                            field: 'title',
                            title: '权限名称',
                            template: function (item) {
                                console.log(item);
                                if (item.level == 1) {
                                    return '<span style="color:green;">' + item.title + '</span>';
                                }
                                if (item.level == 2) {
                                    return '<span style="color:red;">' + item.title + '</span>';
                                }
                                return item.title;
                            }
                        },
                        {
                            field: 'permiDescribe',
                            title: '权限描述'
                        },
                        {
                            field: 'permiName',
                            title: '权限标示'
                        },
                        {
                            field: 'permiUrl',
                            title: '权限路径'
                        },
                        {
                            field: 'id',
                            title: 'ID'
                        },
                        {
                            field: 'status',
                            title: '状态',
                            template: function (item) {
                                if (item.status == 0) {
                                    return '<input  type="checkbox" value=' + item.id + ' checked lay-skin="switch" lay-filter="status" lay-text="开启|关闭">';
                                } else {
                                    return '<input  type="checkbox" value=' + item.id + ' lay-skin="switch" lay-filter="status" lay-text="开启|关闭">';
                                }
                            }
                        },
                        {
                            field: 'pid',
                            title: '父ID'
                        },
                        {
                            field: 'seq',
                            title: '排序序列'
                        },
                        {
                            field: 'permiType',
                            title: '类型',
                            template: function (obj) {
                                if (obj.permiType == 0) {
                                    return '<span style="color:black;">目录</span>';
                                } else if (obj.permiType == 1) {
                                    return '<span style="color:green;">菜单</span>';
                                } else {
                                    return '<span style="color:red;">功能</span>';
                                }
                            }
                        },
                        {
                            field: 'createtime',
                            title: '创建日期'
                        },
                        {
                            field: 'actions',
                            title: '操作',
                            template: function (item) {
                                var tem = [];
                                if (item.permiType == 0 || item.permiType == 1) {
                                    tem.push('<a  class="layui-btn layui-bg-blue layui-btn-xs" lay-filter="add">添加子级</a>');
                                }
                                tem.push('<a  class="layui-btn layui-btn-xs" lay-filter="edit">编辑</a>');
                                tem.push('<a  class="layui-btn layui-btn-danger layui-btn-xs" lay-filter="delete">删除</a>')
                                return tem.join(' <font>|</font> ')
                            },
                        },
                    ]
                });
            }
        })
        /*添加子节点监听*/
        treetable.on('treetable(add)', function (data) {
            //提交到的路径
            var url = "/dangxia/permission/addPermission";
            $("#addPermission").attr("action", url);
            /*打开添加节点面板*/
            layer.open({
                type: 1,
                title: "添加权限",
                area: ['500px', '500px'],
                content: $('#permissionDom')
            });
            $("#addPermission")[0].reset();
            //设置当前id为父ID
            $("#permiParentId").val(data.item.id);
            //0为目录 给目录添加子项时
            if (data.item.permiType == 0) {
                //权限类型 1菜单
                $("#permiType").val("1");
                //禁用权限标识
                $("#permiName").attr("disabled", "true");
                $("#permiName").removeAttr('lay-verify');
                //启用Url地址
                $("#permiUrl").removeAttr("disabled");
                $("#permiUrl").attr("lay-verify", "required");
            } else if (data.item.permiType == 1) {
                //1为菜单给菜单添加子项时
                //权限类型
                $("#permiType").val("2");
                //启用权限标识
                $("#permiName").removeAttr("disabled");
                $("#permiName").attr("lay-verify", "required");
                //禁用Url地址
                $("#permiUrl").attr("disabled", "true");
                $("#permiUrl").removeAttr('lay-verify');
            }
            console.dir(data);
        });
        /*编辑按钮事件监听*/
        treetable.on('treetable(edit)', function (data) {
            layer.msg('编辑操作');
            var url = "/dangxia/permission/updatePermissionById";
            $("#addPermission").attr("action", url);
            console.log(data);
            /*打开添加节点面板*/
            layer.open({
                type: 1,
                title: "修改权限",
                area: ['500px', '500px'],
                content: $('#permissionDom')
            });
            //重置表单
            $("#addPermission")[0].reset();
            /*---------给表单赋默认值------------*/
            //ID
            $("#id").val(data.item.id);
            //父ID
            $("#permiParentId").val(data.item.pid);
            //权限名称
            $("#permiTitle").val(data.item.title);
            //排序序列
            $("#seq").val(data.item.seq);
            //描述信息
            $("#permiDescribe").val(data.item.permiDescribe);
            //权限路径
            $("#permiUrl").val(data.item.permiUrl);
            //权限标示
            $("#permiName").val(data.item.permiName);
            //目录   修改目录时
            if (data.item.permiType == 0) {
                //禁用权限标识
                $("#permiName").attr("disabled", "true");
                $("#permiName").removeAttr('lay-verify');
                //禁用Url地址
                $("#permiUrl").attr("disabled", "true");
                $("#permiUrl").removeAttr('lay-verify');
                //修改菜单时
            } else if (data.item.permiType == 1) {

                //禁用权限标识
                $("#permiName").attr("disabled", "true");
                $("#permiName").removeAttr('lay-verify');
                //启用Url地址
                $("#permiUrl").removeAttr("disabled");
                $("#permiUrl").attr("lay-verify", "required");
                //2 修改功能时
            } else if (data.item.permiType == 2) {
                //启用权限标识
                $("#permiName").removeAttr("disabled");
                $("#permiName").attr("lay-verify", "required");
                //禁用Url地址
                $("#permiUrl").attr("disabled", "true");
                $("#permiUrl").removeAttr('lay-verify');
            }
            console.dir(data);
        });
        /*删除按钮事件监听*/
        treetable.on('treetable(delete)', function (data) {
            layer.msg('删除操作');

            layer.confirm('删除之后将无法恢复！', function (index) {
                //发送请求
                $.post("/dangxia/permission/deletePermissionById", {
                    id: data.item.id
                }, function (data) {
                    if (data.code == 0) {
                        /*刷新*/
                        window.location.replace(location.href);
                    } else {
                        layer.msg("请先删除子权限！");
                    }
                });
                layer.close(index);
            });
            console.dir(data);
        });
        /*打开全部*/
        o('.up-all').click(function () {
            treetable.all('up');
        });
        /*关闭全部*/
        o('.down-all').click(function () {
            treetable.all('down');
        });
        /*选择全部*/
        o('.get-checked').click(function () {
            console.dir(treetable.all('checked'));
        });

        //定义表单是否提交
        //防止网速慢 重复提交表单
        var formLock = true;

        /*监听添加权限提交*/
        form.on('submit(submit)', function (data) {

            //表单是否提交
            if (formLock != true){
                return false;
            }
            //提交状态修改
            formLock = false;

            $("#addPermission").ajaxForm(function (data) {
                if (data.code == 0) {

                    //提交状态
                    formLock = true;

                    layer.msg("添加成功");
                    $("#addPermission")[0].reset();
                    window.location.replace(location.href);
                    layer.closeAll();
                }
            });

        });


        /*监听添加目录按钮*/
        form.on('submit(addDir)', function (data) {

            var url = "/dangxia/permission/addPermission";
            $("#addPermission").attr("action", url);
            /*打开添加节点面板*/
            layer.open({
                type: 1,
                title: "添加目录",
                area: ['500px', '500px'],
                content: $('#permissionDom')
            });
            //重置表单
            $("#addPermission")[0].reset();
            //设置当前id为父ID
            $("#permiParentId").val(0);
            //权限类型 0为目录
            $("#permiType").val("0");
            //禁用权限标识
            $("#permiName").attr("disabled", "true");
            $("#permiName").removeAttr('lay-verify');
            //禁用Url地址
            $("#permiUrl").attr("disabled", "true");
            $("#permiUrl").removeAttr('lay-verify');
        });
        /*Switch事件监听*/
        form.on('switch(status)', function (data) {
            //定义状态标示
            var status = '';
            /*启用为0 禁用为1*/
            if (data.elem.checked) {
                status = 0;
            } else {
                status = 1;
            }
            $.post("/dangxia/permission/updatePermissionStatus", {
                "id": data.value,
                "status": status
            }, function (data) {
                if (data.code != 0) {
                    window.location.replace(location.href);
                }
            })
        });
    });

</script>
</body>
</html>